<template>
  <el-dialog
    v-if="data"
    :title="'加载表: ' + data.dataName"
    :visible.sync="loadSheetBoxVisible"
    width="80%"
    :close-on-click-modal="false"
  >
    <div class="load-sheet-box">
      <ul class="sheet-list">
        <li
          v-for="sheet in data.sheets"
          :key="sheet"
          @click="setActiveSheet(sheet)"
          :class="{'active': activeSheet == sheet}"
        >
          <input type="checkbox" name="sheets" :value="sheet" v-model="sheets" />
          <span>{{sheet}}</span>
        </li>
      </ul>
      <div class="table" v-if="table==''">
        <h2>未选择任何要预览的表</h2>
      </div>
      <div class="table" v-else v-html="table"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="setLoadSheetBoxVisible(false)">取 消</el-button>
      <el-button type="primary" @click="load()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["loadSheetBoxVisible", "data"],
  data() {
    return {
      table: "",
      activeSheet: null,
      sheets:[],
    };
  },
  methods: {
    setLoadSheetBoxVisible(val){
        this.$emit('set-load-sheet-box-visible', val)
    },
    setActiveSheet(sheet) {
      let json = this.data.sheetJson[sheet];
      this.table = this.data.sheetTable[sheet];

      if (json == "{}") {
        this.table = "<h2>暂无任何数据</h2>";
      }

      this.activeSheet = sheet;
    },
    load() {
      if (this.sheets.length == 0) {
        this.$message.error("请选择要加载的表！");
        return;
      }

      let data = {
        sheetNames: this.sheets,
      };

      this.$axios.post("/load", data).then((res) => {
        if (res.code == 200) {
          this.setLoadSheetBoxVisible(false)
          this.table = ""
          this.sheets = []
          this.$store.commit("addLoadSheetList", res.data);
        }
      });
    },
  },
};
</script>


<style scoped>

.active {
  background-color: rgb(244, 244, 244);
}

.load-sheet-box {
  display: flex;
  justify-content: space-around;
}

.load-sheet-box > .sheet-list {
  width: 20%;
}

.load-sheet-box > .table {
  width: 80%;
  max-height: 400px;
  border-left: 1px solid rgb(234, 234, 234);
  padding-left: 15px;
  text-align: center;

  overflow: scroll;
  user-select: none;
}

.sheet-list {
  list-style-type: none;
  user-select: none;
}

.sheet-list li {
  padding: 8px;
}

.sheet-list li:hover {
  background-color: rgb(244, 244, 244);
}
</style>

<style>
.postgres-sql-box .content .el-input {
  margin-bottom: 5px;
}
</style>

<style>
  .load-sheet-box .dataframe th,
  .load-sheet-box .dataframe td{
    word-break: keep-all;white-space:nowrap;
    padding:5px 5px 5px 5px;

    border:0px;
  }

  .load-sheet-box .dataframe{
    border:0px;
    border-top:1px solid black;
    border-left:1px solid black;
    border-spacing: 0px;
  }
  
  .load-sheet-box .dataframe tr{
    height: 50px
  }

  .load-sheet-box .dataframe td{
    border-bottom:1px solid black;
  }
</style>